<template>
    <div class="header">
        <div class="header-icon">
            <el-button type="info" icon="el-icon-message" circle></el-button>
            <Message></Message>
            <el-button type="success" icon="el-icon-star-off" circle></el-button>
        </div>
        <span class="username">{{username}}</span>
        <Portrait></Portrait>
    </div>
</template>

<script>
import Message from"./Buttonevent/Message.vue"
import Portrait from"./Buttonevent/Portrait.vue"

export default {
    components:{
        Message,
        Portrait,
    },
    data() {
        return {
            username : "admin"
        }
    },

    mounted(){
        this.getdata()
    },
    methods: {
        getdata(){
            this.username = localStorage.getItem("name");
        },
    }
}
</script>

<style lang="scss" scoped>
.header{
    box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;

    height: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    // /* font: italic 700 16px
    font: italic 700 16px 'Microsoft yahei';
    .header-icon {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 150px;
			margin-right: 22px;
			.icon-style {
				font-size: 20px;
				color: rgb(0 0 0 / 75%);
				cursor: pointer;
			}
		}
    .username {
			margin: 0 20px 0 0;
			font-size: 15px;
			color: rgb(0 0 0 / 75%);
		}
}
</style>